<template>
<div class="projects-container">
    <el-card class="project-item" v-for="item in projectList" :key="item.id">
      <img :src="item.img" class="image">
      <div class="book-text-area">
          <h4 class="book-title">{{item.name}}</h4>
          <h5 class="book-desc">{{item.desc}}</h5>
      </div>
      <div class="setting-cover">
        <i class="setting-icon el-icon-view"></i>
        <i class="setting-icon el-icon-share"></i>
        <i class="setting-icon el-icon-info"></i>
      </div>
    </el-card>

    <el-card class="project-item new-project-item">       
        <h4 class="book-title">新建项目</h4>
        <h5 class="book-desc"></h5>
       
    </el-card>
    
</div>  
</template>

<script>
export default {
    props:{
        projectList:{
            type:Array
        }
    }
}
</script>

<style lang="scss">

.projects-container {
    display: flex;
    flex-wrap: wrap;    
    align-content: flex-start;
    justify-content: flex-start;
    padding: 1px 1px 29px;
    
    .project-item {
        position: relative;
        width: 143px;
        height: 190px;
        background-color: #909399;
        margin: 0 30px 30px;
        border-radius: 5px;
        cursor: pointer;
        color: #fff;
        border: none;
        background-size: 100% 100%
    }
    .book-desc{
        font-weight: inherit;
        font-size: 12px;
    }
    .project-item img{
        position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 0;
    }
    .project-item:hover {
        -webkit-box-shadow: 0 6px 17px 5px rgba(70,70,70,.25)!important;
        box-shadow: 0 6px 17px 5px rgba(70,70,70,.25)!important;
        margin-top: -8px
    }

    .project-item .collect {
        position: absolute;
        top: 0;
        right: 10px
    }

    .project-item .collect .un-collect {
        display: none
    }

    .project-item:hover .collect .un-collect {
        display: block
    }

    .new-project-item {
        color: #909399;
        background: url() 51px 103px no-repeat
    }

    .new-project-item:hover {
        background: url() 51px 103px no-repeat;
        color: #409eff
    }

    .book-text-area {
        position: absolute;
        z-index: 1;
        top: 40px;
        left: 10%;
        width: 80%;
        text-shadow: 0 0 10px #9c9c9c
    }

    .book-title {
        text-align: center;
        margin-top: 10px;
        word-break: break-all
    }

    .desc-text {
        color: #fff;
        text-align: center;
        margin-top: 40px;
        z-index: 1
    }

    .setting-cover {
        opacity: 0;
        position: absolute;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 30px;
        line-height: 30px;
        color: #545454;
        font-size: 18px;
        background: hsla(0,0%,100%,.7);
        -webkit-transition: .5s;
        transition: .5s;
        text-align: right;

    }

    .setting-icon {
        margin: 3px 10px 0 5px
    }

    .project-item:hover .setting-cover {
        opacity: 1
    }
}



</style>